<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>投票页面</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; background: #f5f5f5; margin: 0; padding: 20px; }
    h1 { margin-bottom: 20px; }
    .team { background: #fff; margin: 10px; padding: 15px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); font-size: 1.2rem; cursor: pointer; transition: 0.3s; }
    .team:hover { background: #007bff; color: #fff; }
    .completed { display: none; margin-top: 50px; font-size: 1.5rem; color: #007bff; }
    .transition { display: none; margin-top: 50px; font-size: 1.5rem; color: #ff9800; }
  </style>
</head>
<body>
  <h1>请选择你支持的小组</h1>
  <div id="voteArea"></div>

  <!-- 过渡界面 -->
  <div id="transition" class="transition">
    ⏳ 投票提交中，请稍候...
  </div>

  <!-- 完成界面 -->
  <div id="completed" class="completed">
    🎉 投票完成！感谢您的参与 🎉
  </div>

  <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
    import { getDatabase, ref, get, set } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js";

    // Firebase 配置
    const firebaseConfig = {
      apiKey: "你的API_KEY",
      authDomain: "你的PROJECT_ID.firebaseapp.com",
      databaseURL: "https://你的PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "你的PROJECT_ID",
      storageBucket: "你的PROJECT_ID.appspot.com",
      messagingSenderId: "你的messagingSenderId",
      appId: "你的appId"
    };
    const app = initializeApp(firebaseConfig);
    const db = getDatabase(app);

    const teams = ["第一组", "第二组", "第三组", "第四组", "第五组", "第六组"];
    const voteArea = document.getElementById('voteArea');
    const completedDiv = document.getElementById('completed');
    const transitionDiv = document.getElementById('transition');

    // 检查本地是否已经投票
    const votedKey = 'hasVoted';
    const hasVoted = localStorage.getItem(votedKey) === 'true';
    if(hasVoted){
      voteArea.style.display = 'none';
      completedDiv.style.display = 'block';
    }

    // 渲染投票按钮
    if(!hasVoted){
      teams.forEach((team, index) => {
        const div = document.createElement('div');
        div.className = 'team';
        div.textContent = team;
        div.onclick = () => vote(index);
        voteArea.appendChild(div);
      });
    }

    function vote(index){
      // 禁止重复点击
      voteArea.style.display = 'none';
      transitionDiv.style.display = 'block';

      const voteRef = ref(db, `votes/group${index}`);
      get(voteRef).then(snapshot => {
        const current = snapshot.val() || 0;
        set(voteRef, current + 1)
          .then(() => {
            // 记录本地已经投票
            localStorage.setItem(votedKey, 'true');
            // 过渡1秒后显示完成界面
            setTimeout(() => {
              transitionDiv.style.display = 'none';
              completedDiv.style.display = 'block';
            }, 1000);
          })
          .catch(err => {
            alert('投票失败，请重试：' + err);
            voteArea.style.display = 'block';
            transitionDiv.style.display = 'none';
          });
      });
    }
  </script>
</body>
</html>
